<template>
    <div class="bor-line"></div>
    <div ref="chartDom" class="chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';
import variables from '../../variables.less?raw';

function getLessVariable(varName: string): string {
    const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
    return match ? match[1].trim() : '#ccc';
}

const chartDom = ref<HTMLElement | null>(null);
const myChart = shallowRef<echarts.ECharts | null>(null);


const deptNames = [
    '党群监察部', '科技教育中心', '发展艺术中心', '视觉艺术中心',
    '校区管理部', '实践教育中心', '财务部', '人力资源部',
    '数字管理部', '办公室', "其他", "其他1", "其他2", "其他3", "其他4", "其他5", "其他6",
];
const deptCostDataPercentages = [16.35, 12.35, 18.35, 25.35, 15.35, 5.35, 15.35, 15.35, 15.35, 15.35, 10, 30, 40, 50, 30, 40, 50];
const deptCostDataValues = [35, 40, 35, 35, 35, 35, 35, 35, 35, 35, 10, 30, 40, 50, 30, 40, 50];


const axisLineColor = getLessVariable('axis-line-color');
const textColor = getLessVariable('text-color');
const primaryColor = getLessVariable('primary-color');


const option: EChartsOption = {
    tooltip: {
        trigger: 'axis', axisPointer: { type: 'shadow' },
        formatter: (params: any) => {
            const index = params[0].dataIndex;
            const name = deptNames[index];
            const value = deptCostDataValues[index] || 0;
            const percentage = deptCostDataPercentages[index] || 0;
            return `${name}<br/>${params[0].marker}成本: ${value}万 (${percentage}%)`;
        },
        backgroundColor: 'rgba(3, 28, 66, 0.9)', borderColor: axisLineColor, textStyle: { color: '#fff' }
    },
    grid: {
        left: '3%', right: '20%', bottom: '3%', top: '5%', containLabel: true
    },
    xAxis: {
        type: 'value', axisLabel: { show: true, color: textColor }, axisLine: { show: false },
        axisTick: { show: false }, splitLine: { show: false }
    },
    yAxis: {
        type: 'category', data: deptNames,
        axisLabel: {
            color: textColor, fontSize: 12,
            formatter: (value: string) => value.length > 6 ? value.slice(0, 5) + '...' : value
        },
        axisLine: { show: true, lineStyle: { color: axisLineColor } },
        axisTick: { show: false }, inverse: true
    },
    dataZoom: [
        {
            type: 'slider',
            yAxisIndex: 0,
            startValue: 0,
            endValue: 5,
            width: 10,
            right: '5px',
            bottom: 20,
            handleSize: '100%',
            handleStyle: {
                color: '#4682B4',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            dataBackground: {
                lineStyle: { color: 'transparent' },
                areaStyle: { color: 'transparent' },
            },
            selectedDataBackground: {
                lineStyle: { color: 'transparent' },
                areaStyle: { color: 'transparent' },
            },
            fillerColor: 'rgba(70, 130, 180, 0.4)',
            textStyle: { color: textColor },
            brushSelect: false
        },
        {
            type: 'inside',
            yAxisIndex: 0,
        }
    ],
    series: [{
        name: '成本占比', type: 'bar', barWidth: 15,
        data: deptCostDataPercentages,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#48a9ed" },
                { offset: 1, color: "#67d7a0" }
            ]),
            borderRadius: [0, 3, 3, 0]
        },
        label: {
            show: true,
            position: 'right',
            color: primaryColor,
            fontSize: 11,
            formatter: (params: any) => {
                const value = deptCostDataValues[params.dataIndex] || 0;
                return `{name|${params.value}%} {value|${value}万}`;
            },
            rich: {
                name: {
                    color: "#fff"
                }
            }
        }
    }]
};

const resizeChart = () => myChart.value?.resize();

onMounted(() => {
    if (chartDom.value) {
        myChart.value = echarts.init(chartDom.value);
        myChart.value.setOption(option);
        window.addEventListener('resize', resizeChart);
    }
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
});

</script>

<style lang="less" scoped>
.chart-container {
    width: 100%;
    height: 250px;
}

.bor-line {
    border: 2px dashed #233460;
    height: 250px;
    width: 390px;
    position: absolute;
    background: rgba(45, 58, 103, 0.5);
}
</style>